/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import React, {useMemo} from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
  TouchableOpacity,
  Image,
  Platform,
  Dimensions,
} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {SafeAreaProvider} from 'react-native-safe-area-context';
import {enableScreens} from 'react-native-screens';
import {
  DevelopmentScreen,
  DocumentationScreen,
  DebugScreen,
  PublishScreen,
} from './src/screens';

// 启用原生屏幕
enableScreens();

const {width: SCREEN_WIDTH} = Dimensions.get('window');

// 卡片数据
const CARDS = [
  {
    id: '1',
    title: '开始开发',
    description: '编辑 App.tsx 文件来修改此页面',
    iconName: 'edit',
    bgColor: '#FFE1E1',
    iconColor: '#FF4D4D',
  },
  {
    id: '2',
    title: '查看文档',
    description: '访问 React Native 官方文档获取更多信息',
    iconName: 'doc',
    bgColor: '#E1F5FF',
    iconColor: '#4DA6FF',
  },
  {
    id: '3',
    title: '调试应用',
    description: '使用 React Native 调试工具进行开发',
    iconName: 'debug',
    bgColor: '#E1FFE4',
    iconColor: '#4DFF60',
  },
  {
    id: '4',
    title: '发布应用',
    description: '将应用发布到应用商店',
    iconName: 'publish',
    bgColor: '#FFE1F9',
    iconColor: '#FF4DC4',
  },
];

// 定义导航类型
type RootStackParamList = {
  Home: undefined;
  Development: undefined;
  Documentation: undefined;
  Debug: undefined;
  Publish: undefined;
};

const Stack = createNativeStackNavigator<RootStackParamList>();

// 修改 Card 组件的 props 类型
type CardProps = {
  title: string;
  description: string;
  iconName: string;
  bgColor: string;
  iconColor: string;
  onPress: () => void;
};

// 修改 Card 组件
const Card = ({
  title,
  description,
  iconName,
  bgColor,
  iconColor,
  onPress,
}: CardProps) => {
  const isDarkMode = useColorScheme() === 'dark';

  const cardStyle = useMemo(
    () => [
      styles.card,
      {
        backgroundColor: isDarkMode ? '#1F1F1F' : '#FFFFFF',
      },
    ],
    [isDarkMode],
  );

  const iconContainerStyle = useMemo(
    () => [
      styles.iconContainer,
      {
        backgroundColor: isDarkMode ? '#2A2A2A' : bgColor,
      },
    ],
    [isDarkMode, bgColor],
  );

  const textColor = useMemo(
    () => ({
      color: isDarkMode ? '#FFFFFF' : '#000000',
    }),
    [isDarkMode],
  );

  const descriptionColor = useMemo(
    () => ({
      color: isDarkMode ? '#E0E0E0' : '#666666',
    }),
    [isDarkMode],
  );

  return (
    <TouchableOpacity
      style={cardStyle}
      activeOpacity={0.7}
      onPress={onPress}>
      <View style={iconContainerStyle}>
        <Image
          source={{
            uri: `asset:/images/${iconName}.png`,
          }}
          style={[styles.cardIcon, {tintColor: isDarkMode ? '#FFFFFF' : iconColor}]}
        />
      </View>
      <View style={styles.cardContent}>
        <Text style={[styles.cardTitle, textColor]}>{title}</Text>
        <Text style={[styles.cardDescription, descriptionColor]}>
          {description}
        </Text>
      </View>
    </TouchableOpacity>
  );
};

// 主页组件
const HomeScreen = ({navigation}: {navigation: any}) => {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = useMemo(
    () => ({
      backgroundColor: isDarkMode ? '#000000' : '#F8F9FA',
      flex: 1,
    }),
    [isDarkMode],
  );

  const textColor = useMemo(
    () => ({
      color: isDarkMode ? '#FFFFFF' : '#000000',
    }),
    [isDarkMode],
  );

  const subtitleColor = useMemo(
    () => ({
      color: isDarkMode ? '#E0E0E0' : '#666666',
    }),
    [isDarkMode],
  );

  const handleCardPress = (screenName: keyof RootStackParamList) => {
    navigation.navigate(screenName);
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      <View style={styles.container}>
        <View style={styles.header}>
          <Text 
            style={[styles.headerTitle, textColor]}
            numberOfLines={1}
            adjustsFontSizeToFit>
            欢迎使用
          </Text>
          <Text 
            style={[styles.headerSubtitle, subtitleColor]}
            numberOfLines={2}>
            开始探索 React Native 的精彩世界
          </Text>
        </View>

        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}
          contentContainerStyle={styles.scrollContent}
          showsVerticalScrollIndicator={false}>
          <View style={styles.cardsGrid}>
            <Card
              {...CARDS[0]}
              onPress={() => handleCardPress('Development')}
            />
            <Card
              {...CARDS[1]}
              onPress={() => handleCardPress('Documentation')}
            />
            <Card
              {...CARDS[2]}
              onPress={() => handleCardPress('Debug')}
            />
            <Card
              {...CARDS[3]}
              onPress={() => handleCardPress('Publish')}
            />
          </View>
        </ScrollView>
      </View>
    </SafeAreaView>
  );
};

// 修改 App 组件
function App(): React.JSX.Element {
  return (
    <SafeAreaProvider>
      <NavigationContainer>
        <Stack.Navigator
          screenOptions={{
            headerShown: true,
            headerBackTitle: '返回',
          }}>
          <Stack.Screen
            name="Home"
            component={HomeScreen}
            options={{headerShown: false}}
          />
          <Stack.Screen
            name="Development"
            component={DevelopmentScreen}
            options={{title: '开发'}}
          />
          <Stack.Screen
            name="Documentation"
            component={DocumentationScreen}
            options={{title: '文档'}}
          />
          <Stack.Screen
            name="Debug"
            component={DebugScreen}
            options={{title: '调试'}}
          />
          <Stack.Screen
            name="Publish"
            component={PublishScreen}
            options={{title: '发布'}}
          />
        </Stack.Navigator>
      </NavigationContainer>
    </SafeAreaProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  header: {
    padding: 24,
    paddingTop: Platform.OS === 'android' ? 24 : 40,
    maxWidth: '100%',
  },
  headerTitle: {
    fontSize: 32,
    fontWeight: 'bold',
    marginBottom: 8,
    includeFontPadding: false,
    letterSpacing: 0.5,
    flexShrink: 1,
    lineHeight: 40,
  },
  headerSubtitle: {
    fontSize: 15,
    opacity: 0.7,
    includeFontPadding: false,
    letterSpacing: 0.3,
    flexShrink: 1,
    lineHeight: 20,
  },
  scrollView: {
    flex: 1,
  },
  scrollContent: {
    paddingHorizontal: 16,
    paddingBottom: 24,
  },
  cardsGrid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
  },
  card: {
    width: (SCREEN_WIDTH - 48) / 2,
    borderRadius: 16,
    padding: 16,
    marginBottom: 16,
    ...Platform.select({
      ios: {
        shadowColor: '#000',
        shadowOffset: {
          width: 0,
          height: 4,
        },
        shadowOpacity: 0.1,
        shadowRadius: 8,
      },
      android: {
        elevation: 4,
      },
    }),
  },
  iconContainer: {
    width: 48,
    height: 48,
    borderRadius: 12,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 12,
  },
  cardIcon: {
    width: 24,
    height: 24,
  },
  cardContent: {
    flex: 1,
  },
  cardTitle: {
    fontSize: 16,
    fontWeight: '600',
    marginBottom: 4,
    includeFontPadding: false,
    lineHeight: 20,
  },
  cardDescription: {
    fontSize: 13,
    lineHeight: 18,
    opacity: 0.8,
    includeFontPadding: false,
  },
  screen: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 16,
  },
});

export default App;
